<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-if</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./vendor/avalon/avalon.js" ></script>
        <script>
            var vmodel = avalon.define({
                $id: "test",
                object: {}
            })


            var model = avalon.define({
                $id: "test2",
                currentIndex: 0,
                toggle: function(index) {
                    model.currentIndex = index
                }
            })

            setTimeout(function() {
                vmodel.object = {id: "132", message: "显示！！"}
            }, 3000)

            setTimeout(function() {
                vmodel.object = {}
            }, 5000)

        </script>
    </head>
    <body>

        <div ms-controller="test2">
            <button ms-click="toggle(0)">触发器1</button> 
            <button ms-click="toggle(1)">触发器2</button>
            <button ms-click="toggle(2)" >触发器3</button>
            <div class="ms-tabs" ms-if="currentIndex === 0">切换卡1<br/>其他内容</div>
            <div class="ms-tabs" ms-if="currentIndex === 1">切换卡2<br/>及司徒正美</div>
            <div class="ms-tabs" ms-if="currentIndex === 2">切换卡3<br/>最后一个了</div>
        </div>

        <div ms-controller="test" >
            这是比较输出结果:{{object.id != null}}
            <div ms-visible="object.id != null">
                这是visible的:
                <span>{{object.message}}</span>
            </div>
            <div ms-if="object.id != null">
                这是if的:
                <span>{{object.message}}</span>
            </div>
        </div>
    </body>
</html>